<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>mobile ComboBox Rtl tests</title>

	<style type="text/css">
		@import "../../themes/iphone/TextBox.css";
		@import "../../themes/iphone/ComboBox.css";
		@import "../../themes/iphone/ComboBox_rtl.css";
	</style>

	<script type="text/javascript" src="../../../../dojo/dojo.js"
		data-dojo-config="parseOnLoad: true, isDebug: true,  has: { 'dojo-bidi': true }"></script>

	<script type="text/javascript">
		dojo.require("doh.runner");
		dojo.require("dojox.mobile");			// This is a mobile app.
		dojo.require("dojo.parser"); //dojo.require("dojox.mobile.parser");	// This mobile app supports running on desktop browsers
		dojo.require("dojox.mobile.compat");	// This mobile app uses declarative programming with fast mobile parser
		dojo.require("dijit.form.DataList");
		dojo.require("dojox.mobile.ComboBox");

		dojo.ready(function(){

			doh.register("attributes", [
				{
					name: "mobile",
					runTest: function(){
						var widget = dijit.byId('mobile_attributes');
						doh.is("", widget.textbox.value, "mobile original value");
						doh.is("", widget.get('value'), "mobile original get('value')");
						doh.is(Infinity, widget.get('pageSize'), "mobile original get('pageSize')");
						widget.set('pageSize', 9);
						widget.set('value', "test");
						doh.is("test", widget.textbox.value, "mobile value");
						doh.is("test", widget.get('value'), "mobile get('value')");
						doh.is(9, widget.get('pageSize'), "mobile get('pageSize')");
					}
	 			}
			]);

			var d, focusHandle, blurHandle, widget, nop = function(){ return false; };
			doh.register("events", [
				{
					name: "mobile",
					timeout: 2000,
					runTest: function(){
						d = new doh.Deferred();
						widget = dijit.byId('mobile_events');

						function onFocus(){
							widget.disconnect(focusHandle);
							focusHandle = null;
							widget.set('displayedValue', "Focus");
							blurHandle = widget.connect(widget.textbox, 'onblur', onBlur);
							dojo.byId('blurry').focus();
						}
						function onBlur(){
							widget.disconnect(blurHandle);
							blurHandle = null;
							widget.set('onChange', onChange);
							widget.set('displayedValue', widget.get('displayedValue')+"Blur");
						}
						function onChange(){
							widget.set('onChange', nop);
							d.getTestCallback(function(){
								doh.is("FocusBlur", widget.textbox.value);
							})();
						}
						doh.is(nop.toString(), widget.get('onChange').toString(), "get('onChange')");
						focusHandle = widget.connect(widget, 'openDropDown', onFocus);
						setTimeout(dojo.hitch(widget, "focus"), 0);

						return d;
					},
					tearDown: function(){
						d.cancel();
						if(blurHandle){ widget.disconnect(blurHandle); }
						if(focusHandle){ widget.disconnect(focusHandle); }
						widget.closeDropDown();
					}
	 			}
			]);

			doh.register("programmatic", [
				{
					name: "mobile",
					timeout: 4000,
					runTest: function(){
						widget = new dojox.mobile.ComboBox({id:"mobile_programmatic", list:"states", value:"Alabama", dir:"rtl" });
						widget.placeAt("mobile_programmatic_container", "first");
						focusHandle = widget.connect(widget, 'openDropDown',
							function(){
								d.getTestCallback(function(){
									widget.disconnect(focusHandle);
									focusHandle = null;
									var pos = dojo.position(widget.domNode, true);
									doh.t(pos.w > 0 && pos.h > 0 && pos.x > 0 && pos.y > 0, 'mobile position');
									doh.is("Alabama", widget.textbox.value, 'mobile textbox value');
									doh.is("Alabama", widget.get('value'), 'mobile widget value');
								})();
							}
						);
						d = new doh.Deferred();
						setTimeout(dojo.hitch(widget, "focus"), 0);

						return d;
					},
					tearDown: function(){
						d.cancel();
						if(focusHandle){ widget.disconnect(focusHandle); }
						widget.closeDropDown();
					}
	 			}
			]);

			doh.register("log", function(){
				dojo.byId('failures').innerHTML = doh._failureCount;
				dojo.byId('errors').innerHTML = doh._errorCount;
			});

			doh.run();
		});
	</script>
</head>
<body style="visibility:hidden;" dir="rtl">
	<h1 class="testTitle">mobile ComboBox non-robot tests</h1>
	<datalist id="states">
	<select data-dojo-type="dijit.form.DataList" data-dojo-props='id:"states"' >
		<option value="AL">Alabama</option>
		<option value="AK">Alaska</option>
		<option value="AS">American Samoa</option>
		<option value="AZ">Arizona</option>
		<option value="AR">Arkansas</option>
		<option value="AE">Armed Forces Europe</option>
		<option value="AP">Armed Forces Pacific</option>
		<option value="AA">Armed Forces the Americas</option>
		<option value="CA">California</option>
		<option value="CO">Colorado</option>
		<option value="CT">Connecticut</option>
		<option value="DE">Delaware</option>
		<option value="DC">District of Columbia</option>
		<option value="FM">Federated States of Micronesia</option>
		<option value="FL">Florida</option>
		<option value="GA">Georgia</option>
		<option value="GU">Guam</option>
		<option value="HI">Hawaii</option>
		<option value="ID">Idaho</option>
		<option value="IL">Illinois</option>
		<option value="IN">Indiana</option>
		<option value="IA">Iowa</option>
		<option value="KS">Kansas</option>
		<option value="KY">Kentucky</option>
		<option value="LA">Louisiana</option>
		<option value="ME">Maine</option>
		<option value="MH">Marshall Islands</option>
		<option value="MD">Maryland</option>
		<option value="MA">Massachusetts</option>
		<option value="MI">Michigan</option>
		<option value="MN">Minnesota</option>
		<option value="MS">Mississippi</option>
		<option value="MO">Missouri</option>
		<option value="MT">Montana</option>
		<option value="NE">Nebraska</option>
		<option value="NV">Nevada</option>
		<option value="NH">New Hampshire</option>
		<option value="NJ">New Jersey</option>
		<option value="NM">New Mexico</option>
		<option value="NY">New York</option>
		<option value="NC">North Carolina</option>
		<option value="ND">North Dakota</option>
		<option value="MP">Northern Mariana Islands</option>
		<option value="OH">Ohio</option>
		<option value="OK">Oklahoma</option>
		<option value="OR">Oregon</option>
		<option value="PA">Pennsylvania</option>
		<option value="PR">Puerto Rico</option>
		<option value="RI">Rhode Island</option>
		<option value="SC">South Carolina</option>
		<option value="SD">South Dakota</option>
		<option value="TN">Tennessee</option>
		<option value="TX">Texas</option>
		<option value="UT">Utah</option>
		<option value="VT">Vermont</option>
		<option value="VI">Virgin Islands, U.S.</option>
		<option value="VA">Virginia</option>
		<option value="WA">Washington</option>
		<option value="WV">West Virginia</option>
		<option value="WI">Wisconsin</option>
		<option value="WY">Wyoming</option>
	</select>
	</datalist>
	<table id="table" cellspacing="20">
		<tr>
			<td class="layout">I follow table direction</td>
			<td class="layout"><input id="mobile_attributes" data-dojo-type="dojox.mobile.ComboBox" data-dojo-props='value:"", list:"states"'></td>
		</tr>
		<tr>
			<td class="layout">I am LTR</td>
			<td class="layout" dir="ltr"><input id="mobile_events" data-dojo-type="dojox.mobile.ComboBox" data-dojo-props='value:"", list:"states", onChange:function(){ return false; }'></td>
		</tr>
		<tr>
			<td class="layout">programmatic</td>
			<td class="layout" id="mobile_programmatic_container"></td>
		</tr>
	</table>
	<input tyle="checkbox" id="blurry" style="opacity:0;border:0px none;"/>
	<br>Errors:&nbsp;<span id="errors">?</span>
	<br>Failures:&nbsp;<span id="failures">?</span>
</body>
</html>
